<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS3实现动画风车windmill</title>
		<style>
			body {
				background: #a5cad6;
			}
			h1 {
				display: block;
				margin: 50px auto;
				width: 300px;
				text-align: center;
				font-size: 12px;
			}
			footer {
				font: 14px/1.3 'Microsoft YaHei';
				color: #000;
				font-size: 15px;
				line-height: 1.6;
				padding: 60px 20px 0;
				text-align: center;
				display: block;
			}
			footer a {
				color: #000;
				text-decoration: none;
			}
			footer a: hover {
				text-decoration: underline;
			}
			.windmill {
				display: block;
				position: relative;
				margin: 50px auto;
				width: 100px;
				height: 120px;
			}
			.windmill: after {
				background: transparent url(/jscss/demoimg/201309/windmill.png) no-repeat -100px 0;
				width: 100px;
				height: 120px;
				bottom: 0;
				left: 0;
				position: absolute;
				content: '';
			}
			.windmill .spinning-wing {
				background: transparent url(/jscss/demoimg/201309/windmill.png) no-repeat 0px 0;
				width: 100px;
				height: 100px;
				margin: 0;
				top: 0;
				left: 0;
				position: absolute;
				z-index: 88;
				-webkit-transition-property: -webkit-transform;
				-webkit-transition-duration: 1s;
				-moz-transition-property: -moz-transform;
				-moz-transition-duration: 1s;
				-webkit-animation: rotate 4s linear infinite;
				-moz-animation: rotate 4s linear infinite;
				-o-animation: rotate 4s linear infinite;
				animation: rotate 4s linear infinite;
			}
			.windmill .spinning-wing: hover {
				-webkit-animation: rotate2 .3s linear infinite;
				-moz-animation: rotate2 .3s linear infinite;
				-o-animation: rotate2 .3s linear infinite;
				animation: rotate2 .3s linear infinite;
			}
			@-webkit-keyframes rotate{
			from {
				-webkit-transform: rotate(0deg)
			}
			to {
				-webkit-transform: rotate(360deg)
			}
			}
			@-moz-keyframes
			rotate {from{
				-moz-transform: rotate(0deg)
			}
			to {
				-moz-transform: rotate(359deg)
			}
			}
			@-o-keyframes
			rotate {from{
				-o-transform: rotate(0deg)
			}
			to {
				-o-transform: rotate(359deg)
			}
			}
			@keyframes
			rotate {from{
				transform: rotate(0deg)
			}
			to {
				transform: rotate(359deg)
			}
			}
			@-webkit-keyframes
			rotate2 {from{
				-webkit-transform: rotate(0deg)
			}
			to {
				-webkit-transform: rotate(360deg)
			}
			}
			@-moz-keyframes
			rotate2 {from{
				-moz-transform: rotate(0deg)
			}
			to {
				-moz-transform: rotate(359deg)
			}
			}
			@-o-keyframes
			rotate2 {from{
				-o-transform: rotate(0deg)
			}
			to {
				-o-transform: rotate(359deg)
			}
			}
			@keyframes
			rotate2 {from{
				transform: rotate(0deg)
			}
			to {
				transform: rotate(359deg)
			}
			}
			.windmill2 {
				display: block;
				position: relative;
				margin: 50px auto;
				width: 100px;
				height: 120px;
			}
			.windmill2 .pillar {
				position: absolute;
				top: 8px;
				left: 44px;
				display: block;
				height: 0;
				width: 4px;
				border-width: 0 4px 80px 4px;
				border-style: none solid solid;
				border-color: transparent transparent white;
			}
			.windmill2 .axis {
				position: absolute;
				top: 0px;
				left: 46px;
				width: 4px;
				height: 4px;
				border: 3px #fff solid;
				background: #a5cad6;
				border-radius: 5px;
				z-index: 88;
				-webkit-transition-property: -webkit-transform;
				-webkit-transition-duration: 1s;
				-moz-transition-property: -moz-transform;
				-moz-transition-duration: 1s;
				-webkit-animation: rotate 4s linear infinite;
				-moz-animation: rotate 4s linear infinite;
				-o-animation: rotate 4s linear infinite;
				animation: rotate 4s linear infinite;
			}
			.windmill2 .swing {
				position: absolute;
				top: 1px;
				left: -2px;
				display: block;
				height: 0;
				width: 2px;
				border-width: 50px 2px 0px 2px;
				border-style: solid solid none;
				border-color: white transparent transparent;
				box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);
				-webkit-transform-origin: 0px 0px;
				-webkit-transform: rotate(60deg);
				-moz-transform-origin: 0px 0px;
				-moz-transform: rotate(60deg);
				-ms-transform-origin: 0px 0px;
				-ms-transform: rotate(60deg);
				-o-transform-origin: 0px 0px;
				-o-transform: rotate(60deg);
				transform-origin: 0px 0px;
				transform: rotate(60deg);
			}
			.windmill2 .swing2 {
				position: absolute;
				top: 0px;
				left: 4.5px;
				display: block;
				height: 0;
				width: 2px;
				border-width: 50px 2px 0px 2px;
				border-style: solid solid none;
				border-color: white transparent transparent;
				-webkit-transform-origin: 0px 0px;
				-webkit-transform: rotate(180deg);
				-moz-transform-origin: 0px 0px;
				-moz-transform: rotate(180deg);
				-ms-transform-origin: 0px 0px;
				-ms-transform: rotate(180deg);
				-o-transform-origin: 0px 0px;
				-o-transform: rotate(180deg);
				transform-origin: 0px 0px;
				transform: rotate(180deg);
			}
			.windmill2 .swing3 {
				position: absolute;
				top: 6px;
				left: 3px;
				display: block;
				height: 0;
				width: 2px;
				border-width: 50px 2px 0px 2px;
				border-style: solid solid none;
				border-color: white transparent transparent;
				-webkit-transform-origin: 0px 0px;
				-webkit-transform: rotate(300deg);
				-moz-transform-origin: 0px 0px;
				-moz-transform: rotate(300deg);
				-ms-transform-origin: 0px 0px;
				-ms-transform: rotate(300deg);
				-o-transform-origin: 0px 0px;
				-o-transform: rotate(300deg);
				transform-origin: 0px 0px;
				transform: rotate(300deg);
			}
			.windmill2 .axis: hover {
				-webkit-animation: rotate2 .3s linear infinite;
				-moz-animation: rotate2 .3s linear infinite;
				-o-animation: rotate2 .3s linear infinite;
				animation: rotate2 .3s linear infinite;
			}
		</style>
	</head>
	<body>
		<h1>css3+图片实现的风车效果(把鼠标放在圆点上试试)</h1>
		<span class="windmill"> <span class="spinning-wing"></span> </span>
		<h1>纯css3实现的风车效果(把鼠标放在圆点上试试)</h1>
		<span class="windmill2"> <span class="pillar"></span> <span class="axis"> <span class="swing"></span> <span class="swing2"></span> <span class="swing3"></span> </span> </span>
	</body>
</html>